<template>

  <div class="app-container">



    <el-form label-width="120px">

      <el-form-item label="新闻id">
        <el-input v-model="Info.id" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
      </el-form-item>

      <el-form-item label="新闻标题">
        <el-input v-model="Info.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
      </el-form-item>

      <el-form-item label="所属类别">
        <el-input v-model="Info.kind" placeholder=" 示例：娱乐"/>
      </el-form-item>
      <el-form-item label="内容">
        <quill-editor ref="text" v-model="Info.content" class="myQuillEditor" :options="editorOption" />
      </el-form-item>

      <el-form-item label="热度">
        <el-input v-model="Info.sort" placeholder=" 示例：娱乐"/>
      </el-form-item>

      <el-form-item label="创建时间">
        <el-input v-model="Info.gmtCreate" placeholder=" 示例：娱乐"/>
      </el-form-item>

      <el-form-item label="最后的修改时间">
        <el-input v-model="Info.gmtModified" placeholder=" 示例：娱乐"/>
      </el-form-item>

      <br><br>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveArticle">保存</el-button>
      </el-form-item>
    </el-form>



  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import article from '@/api/article/article'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      editorOption: {},
      saveBtnDisabled:false,
        Info:{
          id:'',
          title: '',
          kind: '',
          content: '',
          sort: 0,
          is_delete: 0,
          gmtCreate:'',
          gmtModified:''
      },
    }
  },
  created() {
    this.getById(this.$route.params.id)
  },
  methods:{
    getById(id) {
      article.getById(id)
        .then(response=>{
            this.Info=response.data.article
        })
    },
    saveArticle() {
      article.update(this.Info)
        .then(response=>{
          this.$message({
            type: 'success',
            message: '修改新闻成功!'
          });
          this.$router.push({path:'/article/index'})
        })
    }
  }
}
</script>
<style scoped>
.tinymce-container {
  line-height: 29px;
}
.myQuillEditor {
  height: 400px;
}

</style>
